<template>
	<view :class="[primarySize()]">
		<view class="container p30">
			<view class="commission_box">
				<view class="flex-box flex-align-end ">
					<view class="flex-grow-1 flex-box flex-between">
						<view>
							<view class="key">总邀请人数</view>
							<view class="value1">{{total_num}}</view>
						</view>
						<view>
							<view class="key">佣金</view>
							<view class="value1">{{xiluuser.money}}元</view>
						</view>
					</view>
					<!-- <view class="btn_cash" @click="withdraw">提现</view> -->
				</view>

			</view>

			<view class="commission_detail">
				<view class="flex-box mb30">
					<view class="flex-box flex-grow-1">
						<view class="title">佣金明细</view>
						<image @click="tipPop" class="icon_tip" src="https://admin.mosizp.cn/static/public/tip.png" mode="widthFix" />
					</view>
				</view>

				<view class="detail_item flex-box" v-for="(item,index) in recomList" :key="index">
					<image v-if="item.is_recommend" src="https://admin.mosizp.cn/static/public/close_img.png" mode="aspectFill" />
					<image v-else src="https://admin.mosizp.cn/static/public/icon_cash.png" mode="aspectFill" />
					<view class="flex-grow-1">
						<view class="text1">
							{{item.user.nickname?item.user.nickname:item.user.mobile}}{{item.is_commission==1 && item.money_log?'-'+item.money_log.memo:''}}
						</view>
						<!-- <view class="text1" wx:else>{{item.user.mobile}}</view> -->
						<view class="text2">{{formatDatetime(item.bindtime,"mm-dd hh:ii")}}</view>
					</view>
					<view class="fs32 status1">+¥{{item.money}}</view>
				</view>

				<view class="nothing" v-if="recomListMore.nothing">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
					<view><text>暂无记录</text></view>
				</view>

				<button ontap="fetch" v-else hover-class="none" class="more_btn mt30">{{recomListMore.text}}</button>
			</view>
			<u-popup :show="tipShow" mode="center" :safeAreaInsetBottom="false" @close="tipPop" bgColor="transparent">
				<view class="custon_pop">
					<view class="tip_pop">
						<view class="title">佣金说明</view>
						<view class="guanbi" @click="tipPop">关闭</view>
						<view class="text">
							<text>{{introduce}}</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				total_num: 0,
				first_num: 0,
				second_num: 0,
				none_num: 0,
				xiluuser: {
					money: 0
				},
				introduce: '',
				recomList: [],
				recomListMore: {
					page: 1
				},
				tipShow: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {
			;
			this.recomInit();
			this.fetch();
		},
		methods: {
			tipPop() {
				this.tipShow= !this.tipShow
			},
			recomInit() {
				let page = this;
				this.$core.get({
					url: '/xilujob.distribution/recom_init',
					loading: false,
					success(ret, data) {
						page.total_num = ret.data.total_num
						page.first_num = ret.data.first_num
						page.second_num = ret.data.second_num
						page.none_num = ret.data.none_num
						page.xiluuser = ret.data.xiluuser
						page.introduce = ret.data.introduce
					}
				});
			},
			fetch: function() {
				this.$util.fetch(this, '/xilujob.distribution/commission', {
					tab: this.tab
				}, 'recomListMore', 'recomList', 'data');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F5F7F9;
	}

	.commission_box {
		margin: 0 0 30rpx;
		padding: 40rpx 30rpx 35rpx;
		background: var(--primary);
		border-radius: 20rpx;
	}

	.commission_box .line {
		padding: 0 0 30rpx;
		margin: 0 0 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.commission_box .btn_cash {
		margin: 0 0 0 30rpx;
		width: 116rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: var(--primary);
		line-height: 60rpx;
		text-align: center;
	}

	.commission_box .key {
		margin: 0 0 20rpx;
		font-size: 28rpx;
		color: #FFF;
		line-height: 30rpx;
	}

	.commission_box .value1 {
		font-size: 44rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 46rpx;
	}

	.commission_box .value2 {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.commission_detail {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.commission_detail .title {
		font-size: 34rpx;
		font-weight: bold;
		color: #101010;
		line-height: 36rpx;
	}

	.commission_detail .icon_tip {
		margin: 0 0 0 10rpx;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.detail_item {
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.detail_item image {
		margin-right: 20rpx;
		display: block;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.detail_item .text1 {
		margin: 0 0 20rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 26rpx;
	}

	.detail_item .text2 {
		font-size: 22rpx;
		color: #CCCCCC;
		line-height: 24rpx;
	}

	.detail_item .status1 {
		color: #FF5332;
	}

	.detail_item .status2 {
		color: var(--primary);
	}

	.detail_item .status3 {
		color: #999999;
	}

	.custon_pop {
		margin: 0;
		border-radius: 20rpx !important;
	}

	.tip_pop {
		position: relative;
		padding: 70rpx 60rpx 30rpx;
		width: 600rpx;
		height: 708rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.tip_pop .title {
		margin: 0 0 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #101010;
		line-height: 50rpx;
	}

	.tip_pop .text {
		max-height: boldrpx;
		font-size: 30rpx;
		color: #898989;
		line-height: 42rpx;
		overflow-y: scroll;
	}

	.tip_pop .guanbi {
		position: absolute;
		right: 0;
		top: 0;
		padding: 30rpx 30rpx 0 0;
		font-size: 24rpx;
		color: #898989;
		line-height: 28rpx;
	}
</style>